{% extends "base_generic.html" %}
{% load i18n %}
{% load widget_tweaks %}

{% block content %}
<div class="d-flex justify-content-center align-items-center" style="min-height: 80vh;">
  <div class="card shadow p-4" style="min-width:350px; max-width:400px; width:100%;">
    <h2 class="mb-4 text-center"><i class="bi bi-box-arrow-in-right me-2"></i>{% trans 'Login' %}</h2>
    {% if form.errors %}
      <div class="alert alert-danger">{% trans "Your username and password didn't match. Please try again." %}</div>
    {% endif %}
    {% if next %}
      {% if user.is_authenticated %}
        <div class="alert alert-warning">{% trans "Your account doesn't have access to this page. To proceed,please login with an account that has access." %}</div>
      {% else %}
        <div class="alert alert-info">{% trans "Please login to see this page." %}</div>
      {% endif %}
    {% endif %}
    <form method="post" action="{% url 'login' %}">
      {% csrf_token %}
      <div class="form-group mb-3">
        {{ form.username.label_tag }}
        {{ form.username|add_class:'form-control' }}
      </div>
      <div class="form-group mb-3">
        {{ form.password.label_tag }}
        {{ form.password|add_class:'form-control' }}
      </div>
      <input type="hidden" name="next" value="{{ next }}" />
      <button type="submit" class="btn btn-primary w-100">{% trans 'Login' %}</button>
    </form>
    <div class="mt-3 text-center">
      <a href="{% url 'password_reset' %}" class="text-decoration-none"><i class="bi bi-key me-1"></i>{% trans "Lost password?" %}</a>
    </div>
    <div class="mt-2 text-center">
      <a href="{% url 'register' %}" class="text-decoration-none"><i class="bi bi-person-plus me-1"></i>{% trans "Don't have an account? Click here to register" %}</a>
    </div>
  </div>
</div>
{% endblock %}
